<template>
	<div>
		<!-- 图片弹出层 -->
		<el-dialog v-el-drag-dialog :visible.sync="dialogVisible" title="表格排序" :close-on-click-modal="false">
			<el-table ref="dragTable" :data="myDataInfo" row-key="id" border highlight-current-row>
				<el-table-column align="center" v-for="item in myColumns" :label="item.label" :prop="item.property" :show-overflow-tooltip="true">
					<template slot-scope="{row, $index}">
						<span v-if="item.type==='index'"> {{$index+1}} </span>
						<span v-if="item.type==='default'"> {{row[item.property]}} </span>
						<!-- <span v-if="item.type==='date'"> {{item.type}} </span>
							<span v-if="item.type==='datetime'"> {{item.type}} </span> -->
							<span v-if="item.type==='img'"> 
								<img :src="row[item.property]" min-width="70" height="70"/> 
							</span>
						</template>
					</el-table-column>
				</el-table>
				<span slot="footer" class="dialog-footer">
			    	<el-button @click="dialogVisible = false">取 消</el-button>
			    	<el-button type="primary" @click="submitSort()">确 定</el-button>
			  	</span>
			</el-dialog>

		</div>
	</template>

	<script>
	import Sortable from 'sortablejs'
	import { get, post } from '@/utils/httpUtil'
	export default {
		name: 'table.sort', 
		data() {
			return {
			dialogVisible: false, //普通图片弹出框
			width:'1000px',
			option:{ //排序属性
				dataUrl:'', //获取数据接口
				sortUrl:'', //排序接口
				formData:{}, //查询参数
				ref:null, //表格的引用
				callback:()=>{}
			},
			myDataInfo: [], //表格数据
			myColumns:[], //列名
		};
	},
	methods: {
    	open(opt){ //打开排序弹出框
    		if(!opt.dataUrl){
    			this.msg.error('未找到数据获取接口');
    			return false;
    		}
    		if(!opt.sortUrl){
    			this.msg.error('未找到数据提交接口');
    			return false;
    		}
    		if(!opt.ref){
    			this.msg.error('未声明表格引用');
    			return false;
    		}
    		this.option = opt;
    		this.dialogVisible = true;

    		this.getData(); //获取表格数据
    		this.getColumns(); //获取表格列
    	},
    	getData(){
    		this.option.formData.currentPage = 1;
    		this.option.formData.pageSize = 100;
    		get(this.option.dataUrl, this.option.formData).then(d=>{
    			this.myDataInfo = d.data.list;
    			this.$nextTick(() => {
    				this.setSort()
    			})
    		})
    	},
    	setSort() {
    		const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
    		let _this = this;
    		Sortable.create(el, {
			    ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
			    setData: function(dataTransfer) {
			      //dataTransfer.setData('Text', '')
			  },
			 onEnd: evt => {
			  	const targetRow = _this.myDataInfo.splice(evt.oldIndex, 1)[0];
			  	_this.myDataInfo.splice(evt.newIndex, 0, targetRow);
			  	/*el;
			  	debugger */
			  	/*evt.item.children.forEach(item=>{
			  		item.classList.add('sortable-moved-tr');	
			  	})*/

			  	el.children.forEach(item=>{
			  		item.classList.remove('sortable-moved-tr');	
			  	})
			  	evt.item.classList.add('sortable-moved-tr');
			  }
			})
    	},
    	getColumns(){
    		let _this = this;
    		_this.myColumns = [];
    		_this.myColumns.push({ label: '序号', type: 'index' })
    		this.option.ref.columns.forEach( (item, index) => {
    			if(!item.property){ return; }
    			_this.myColumns.push({
    				label: item.label,
    				property: item.property,
    				type: item.type
    			})
    		})
    	},
    	submitSort(){ //提交排序
    		//todo 参数处理 根据后台接口确认
    		post(this.option.sortUrl, {}).then(d=>{
    			this.dialogVisible = false;
            	this.option.callback(d);
            })
    	}
    }
}
</script>
<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
.sortable-moved-tr > td{
	background:#409EFF;
}
</style>